<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="_getDeviceMqttConfig"
    :columns="columns"
    :hideSearch="true"
    :height="500"
    row-key="groupId"
  >
  </ProTable>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { getDeviceMqttConfig } from '@/api/device';

interface Props {
  pageData: any;
}
const props = defineProps<Props>();

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '日期',
    dataIndex: 'createTime',
  },
  {
    title: '服务IP地址',
    dataIndex: 'mqttIp',
  },
  {
    title: '服务端口',
    dataIndex: 'mqttPort',
  },
  {
    title: '账号',
    dataIndex: 'mqttAccount',
  },
  {
    title: '密码',
    dataIndex: 'mqttPassword',
    hideInSearch: true,
  },
  {
    title: '客户端ID',
    dataIndex: 'mqttClientID',
  },
  {
    title: '群组ID',
    dataIndex: 'groupId',
  },
  {
    title: '预警主题',
    dataIndex: 'subscribedTopicWarning',
  },
  {
    title: '预警主题',
    dataIndex: 'subscribedTopicReport',
  },
  {
    title: '预警回复',
    dataIndex: 'ackTopicWarning',
  },
  {
    title: '速报回复',
    dataIndex: 'ackTopicReport',
  },
]);

const _getDeviceMqttConfig = (params: any) => {
  return getDeviceMqttConfig(props.pageData.code, params);
};
</script>

<style lang="scss" scoped></style>
